import React, { memo, useRef, useEffect } from 'react'
import type { ChangeEvent, FC, ReactNode } from 'react'

import { QRCode } from 'antd'
import classNames from 'classnames'
import styles from './index.module.scss'
import TimeSelector from '../Antd/TimeSelector'

import '../../styles/iconfont.css'
import fetchData from '../../request/index'
import { useMyDispatch, useMySelector, MyShallEqual } from '../../store'
import { setIsOpen } from '../../store/modules/create'
import { setCodeUrl } from '../../store/modules/success'

interface IProps {
  children?: ReactNode
}

const ShareCard: FC<IProps> = () => {
  const dispatch = useMyDispatch()
  const refCodeUrl = useRef<HTMLInputElement | null>(null)
  const refSelect = useRef<HTMLSelectElement | null>(null)
  const { isOpen, password, id, ip } = useMySelector(
    (state) => ({
      isOpen: state.code.isOpen,
      password: state.code.password,
      id: state.codeall.id,
      ip: state.codeall.ip
    }),
    MyShallEqual
  )

  useEffect(() => {}, [])

  const copyText = async (content: string) => {
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(content)
    } else {
      const textArea = document.createElement('textarea')
      textArea.value = content
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      document.execCommand('copy')
      document.body.removeChild(textArea)
    }
  }

  const copyCodeUrl = () => {
    if (refCodeUrl.current) {
      const value = refCodeUrl.current.value
      copyText(value)
      dispatch(setCodeUrl(value))
    }
  }

  const changeOpen = async (e: ChangeEvent<HTMLSelectElement>) => {
    if (e.target.value === 'Open') {
      dispatch(setIsOpen(true))
      await fetchData('/update', { id, isOpen: true }, 'POST')
    } else if (e.target.value === 'Password') {
      dispatch(setIsOpen(false))
      await fetchData('/update', { id, isOpen: false }, 'POST')
    }
  }

  return (
    <div className={classNames(styles.container)}>
      <div className={classNames(styles.text)}>分享代码片段</div>
      <div className={classNames(styles.fuzhis)}>
        <input
          type="text"
          className={classNames(styles.input1)}
          value={
            `http://${ip}:${window.location.port}/#/post/pass?id=` +
            id.slice(0, 6) +
            '&pw=' +
            password
          }
          readOnly
          ref={refCodeUrl}
        />
        <div
          className={classNames(styles.fuzhi)}
          onClick={() => {
            copyCodeUrl()
          }}
        >
          复制链接
        </div>
        <div className={classNames('iconfont', 'icon-erweima', styles.erweima)}>
          <div className={classNames(styles.erweimaReal)}>
            <QRCode
              errorLevel="H"
              value={
                `http://${ip}:${window.location.port}/#/post/pass?id=` +
                id.slice(0, 6) +
                '&pw=' +
                password
              }
              bgColor="#FFFFFF"
            />
          </div>
        </div>
      </div>
      <div className={classNames(styles.shareRange)}>
        <div>分享范围</div>
        <select
          name="isOpen"
          id="isOpen"
          value={isOpen ? 'Open' : 'Password'}
          ref={refSelect}
          onChange={(e) => {
            changeOpen(e)
          }}
        >
          <option value="Open">公开</option>
          <option value="Password">加密</option>
        </select>
      </div>
      <div className={classNames(styles.passwordD)}>
        <div>密码</div>
        <div className={classNames(styles.password)}>
          {isOpen ? '' : password}
        </div>
      </div>
      <div className={classNames(styles.endTime)}>
        <div>过期时间</div>
        <div>
          <TimeSelector />
        </div>
      </div>
    </div>
  )
}

export default memo(ShareCard)
